import axios from "axios";
import Vue from "vue";
import { Shape, Node, Graph } from "@antv/x6";
import { register } from "@antv/x6-vue-shape";
import tableNode from "@/pages/admin/components/antV-vue-shape/tableNode.vue";
import svgNode from "@/pages/admin/components/antV-vue-shape/svgNode.vue";

const {Rect, Circle, Image} = Shape
register({
    shape: 'table',
    width: 100,
    height: 100,
    component: tableNode,
})

let svgList = []
let nodeList = []
function createNode(url){
    // let abc = Vue.component('abc',{
    //     template: `<div>
    //                     <svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    //                         <rect width="100%" height="100%" style="fill:blue;stroke-width:2;stroke:rgb(0,0,0)"/>
    //                     </svg>
    //                </div>`
    // })

    let portList = {
        groups: {
            topRect: {
                position: 'top',
                attrs: {
                    circle: {
                        r: 5,
                        magnet: true,
                        stroke: '#31d0c6',
                        fill: '#fff',
                        strokeWidth: 1,
                    }
                }
            },
            leftRect: {
                position: 'left',
                attrs: {
                    circle: {
                        r: 5,
                        magnet: true,
                        stroke: '#31d0c6',
                        fill: '#fff',
                        strokeWidth: 1,
                    }
                }
            },
            rightRect: {
                position: 'right',
                attrs: {
                    circle: {
                        r: 5,
                        magnet: true,
                        stroke: '#31d0c6',
                        fill: '#fff',
                        strokeWidth: 1,
                    }
                }
            },
            bottomRect: {
                position: 'bottom',
                attrs: {
                    circle: {
                        r: 5,
                        magnet: true,
                        stroke: '#31d0c6',
                        fill: '#fff',
                        strokeWidth: 1,
                    }
                }
            },
        },
        items:[
            { id: 'topRect', group: 'topRect'},
            { id: 'leftRect', group: 'leftRect'},
            { id: 'rightRect', group: 'rightRect'},
            { id: 'bottomRect', group: 'bottomRect'},
        ]
    }
    let node = new Image({
        markup: [
            {
                tagName: 'rect',
                selector: 'body'
            },
            {
                tagName: 'image',
                selector: 'image'
            }
        ],
        attrs: {
            body: {
                stroke: '#ffffff',
                fill: 'rgba(255,255,255,0)',
                refWidth: 1,
                refHeight: 1,
            },
            image: {
                'xlink:href': url,
                refWidth: 1,
                refHeight: 1,
            }
        },
        //imageUrl: url,
        x: 0,
        y: 0,
        width: 50,
        height: 50,
        ports: portList,
        tableId: null,
        count: 0,
    })
    // nodeList.push(node)
}

export function initAntVNode(){
    axios.get("InterfaceReturn.json")
        .then((res) => {
            if(res.data !== null && res.data.length > 0){
                svgList = res.data
                console.log(res.data)
                if (nodeList.length === 0){
                    svgList.forEach((item) => {
                        createNode(item.priview_img)
                    })
                }
            }
        })
    return nodeList
}
